<template>
  <div style="width: 100%">
    <el-card style="width: 100%; height: 64px; padding: 4px">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @submit.prevent="onSubmit"
      >
        <el-form-item label="关键词">
          <el-input
            @keyup.enter="onSubmit"
            v-model="formInline.keyword"
            placeholder="请输入内容"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="danger" @click="dialogFormVisible = true"
            >发布群系统消息</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table-box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="avatar" label="头像" width="160">
          <template #default="scope">
            <el-avatar :size="50" :src="scope.row.user_info.avatar" />
          </template>
        </el-table-column>
        <el-table-column fixed prop="nick_name" label="昵称" width="160">
          <template #default="scope">
            <div>{{ scope.row.user_info.nick_name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="group_name" label="群组" width="160" />
        <el-table-column prop="wechat" label="微信号" width="120">
          <template #default="scope">
            <div>{{ scope.row.user_info.wechat }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
          <template #default="scope">
            <div>{{ scope.row.user_info.phone }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          align="center"
          label="内容"
          show-overflow-tooltip
        />
        <el-table-column prop="create_time" label="发送时间" />
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template #default="scope">
            <el-popconfirm title="确认要删除吗?" @confirm="delItem(scope.row)">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-box">
      <el-pagination
        background
        size="small"
        layout="prev, pager, next"
        :total="total_count"
        :page-size="page_size"
        :current-page="current_page"
        @current-change="currentChange"
      />
    </div>
    <el-dialog v-model="dialogFormVisible" title="消息" width="500">
      <el-form :model="form">
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="6"
            v-model="form.content"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="sendGroupMsg"> 发送 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { delMsg, getGroupMessages, sendGroupAd } from "@/api/user";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";

const formInline = ref({
  keyword: ""
});

const current_page = ref(1);
const page_size = ref(20);
const total_count = ref(0);
const dialogFormVisible = ref(false);
const formLabelWidth = "90px";

const onSubmit = () => {
  console.log("submit!");
  load_usrs();
};

const form = reactive({
  content: ""
});

const sendGroupMsg = () => {
  console.log("sendGroupMsg");
  sendGroupAd({
    group_id: "b6af552f-be70-4b08-8404-5e770ce7b582",
    content: form.content
  }).then(res => {
    if (res.code === 200) {
      dialogFormVisible.value = false;
      // 发送成功
      ElMessage.success("发送成功");
    } else {
      // 发送失败
      ElMessage.error("发送失败");
    }
  });
};

const reset = () => {
  formInline.value.keyword = "";
  load_usrs();
};

const delItem = (item: any) => {
  console.log("click");
  delMsg(item.record_id).then((res: any) => {
    console.log("mounted", res);
    if (res.code === 200) {
      load_usrs();
    }
  });
};

const currentChange = (page: number) => {
  console.log("currentChange", page);
  current_page.value = page;
  load_usrs();
};

const load_usrs = () => {
  getGroupMessages({
    page: current_page.value,
    page_size: page_size.value,
    keyword: formInline.value.keyword
    // group_id: "b6af552f-be70-4b08-8404-5e770ce7b582"
  }).then(res => {
    console.log("mounted", res);
    if (res.code === 200) {
      tableData.value = res.data.records.reverse();
      total_count.value = res.data.total_count;
    }
  });
};

onMounted(() => {
  load_usrs();
});

const tableData = ref([]);
</script>

<style lang="scss" scoped>
.table-box {
  height: calc(100vh - 260px);
  overflow-y: auto;
}

.pager-box {
  border-top: solid 1px #eee;
  height: 90px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style>
